<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>JSX属性</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>

  	<!-- 

			1.可以使用引号来定义以字符串为值的属性,也可以使用大括号来定义以 JavaScript 表达式为值的属性

			2.切记使用了大括号包裹的JavaScript表达式时就不要再到外面套引号了。JSX会将引号当中的内容识别为字符串而不是表达式

  	 -->

    <div id="root"></div>

    <script type="text/babel">

      const element = <div tabIndex="0">11111</div>

      const element1 = <div tabIndex={ 1+1 }>11111</div> 

      const element2 = (
        <div>
          <h1>Hello!</h1>
          <h2>Good to see you here.</h2>
        </div>
      );



      ReactDOM.render(
        
        <div>
    
          { element }

          { element1 }

          { element2 }

        </div>,
        
        document.getElementById('root')
      )

    </script>
  </body>
</html>
